<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Row>
    <header>
      <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
        <Row style="margin-top:20px">
          <span>分险分类：</span>
          <Select v-model="collectCondition.riskCategoryCode" class="v-select-wrapper" style="width:150px" name="riskCategoryCode">
            <Option v-for="item in riskCategoryList" :value="item.riskCategoryCode" :key="item.riskCategoryCode">{{ item.riskCategoryName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">贷款产品：</span>
          <Select v-model="collectCondition.productCode" class="v-select-wrapper" style="width:150px" name="productCode">
            <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">渠道：</span>
          <Select v-model="collectCondition.channelCode" class="v-select-wrapper" style="width:150px" name="channelCode">
            <Option v-for="item in channelList" :value="item.channelCode" :key="item.channelCode">{{ item.channelName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">资金源：</span>
          <Select v-model="collectCondition.fundCode" class="v-select-wrapper" style="width:165px" name="fundCode">
            <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">姓名：</span>
          <Input v-model="collectCondition.custName" style="width: 150px" name="custName" />

          <span style="width: 200px;margin-left: 15px;">身份证号：</span>
          <Input v-model="collectCondition.custIdNumber" style="width: 150px" name="custIdNumber" />
          <span style="width: 200px;margin-left: 15px;">手机号：</span>
          <Input v-model="collectCondition.mobileNumber" style="width: 150px" name="mobileNumber" />
        </Row>
        <Row style="margin-top:20px">
          <span>逾期天数：</span>
          <Input v-model="collectCondition.overdueDays" style="width: 150px" name="overdueDays" />
          <span style="width: 200px;margin-left: 15px;">最近一次行动结果：</span>
          <Select v-model="collectCondition.lastActionResultCode" class="v-select-wrapper" style="width:150px" name="lastActionResultCode">
            <Option v-for="item in lastActionResultList" :value="item.actionStatusCode" :key="item.actionStatusCode">{{item.actionStatusDescp}}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">最近一次行动代码：</span>
          <Select v-model="collectCondition.lastActionCode" class="v-select-wrapper" style="width:150px" name="lastActionCode">
            <Option v-for="item in lastActionCodeList" :value="item.actionCodeName" :key="item.actionCodeName">{{item.actionCodeComment}}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">最近行动日期：</span>
          <DatePicker v-model="collectCondition.lastActionBeginDate" type="date" style="width: 150px" name="lastActionBeginDate"></DatePicker>
          <span>至</span>
          <DatePicker v-model="collectCondition.lastActionEndDate" type="date" placement="bottom-end" style="width: 150px" name="lastActionEndDate"></DatePicker>
        </Row>
        <Row style="margin-top:20px">
          <Button type="primary" @click="listQuery" style="margin-left: 10px;">搜索</Button>
          <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
          <Button type="primary" @click="excelDown" style="margin-left: 10px;">excel下载</Button>
          <Button type="primary" @click="modal1 = true" style="margin-left: 10px;">线下委外下载</Button>
        </Row>
        <Row style="margin-top:10px">
          <Modal v-model="modal1" title="线下委外下载条件" @on-ok="outOfLineDown" @on-cancel="cancel">
            <Form :action="this.$appContext.marvels_core_financial+'financial/collection/manage/service/downOutsideExcel'" method="get" name="outOfLineDownForm" id="outOfLineDownForm" enctype="multipart/form-data">
              <Row>
                <Col>
                <FormItem label="最近一次行动结果 :" prop="">
                  <Select class="v-select-wrapper" name="lastActionResultCode" placeholder="最近一次行动结果" style="width:150px">
                    <Option v-for="item in lastActionResultList" :value="item.actionStatusCode" :key="item.actionStatusCode">{{item.actionStatusDescp}}</Option>
                  </Select>
                </FormItem>
                </Col>
              </Row>
              <Row>
                <Col>
                <FormItem label="最近行动日期 :" prop="">
                  <DatePicker v-model="collectCondition.lastActionBeginDate" type="date" style="width: 150px" name="lastActionBeginDate"></DatePicker>
                  <span>~</span>
                  <DatePicker v-model="collectCondition.lastActionEndDate" type="date" placement="bottom-end" style="width: 150px" name="lastActionEndDate"></DatePicker>
                </FormItem>
                </Col>
              </Row>
            </Form>
          </Modal>
        </Row>
        <input type="hidden" name="pageNum" id="pageNum" v-model="collectCondition.pageNum" />
        <input type="hidden" name="pageSize" id="pageSize" v-model="collectCondition.pageSize" />
      </Form>
    </header>
    <div>
      <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
    </div>
    <div style="text-align: center;margin-top: 36px;">
      <Page :total="collectCondition.total" :current="collectCondition.pageNum" :page-size="collectCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
    </div>
  </Row>
</template>

<script>
import collectionDealCompent from './collection-deal-compent.vue'
export default {
  components: {
    collectionDealCompent
  },
  data () {
    return {
      modal1: false,
      collectParams: {
        loanId: '',
        overdueCode: '',
        custCardNo: ''
      },
      collectCondition: {
        riskCategoryCode: '',
        productCode: '',
        channelCode: '',
        fundCode: '',
        custName: '',
        custIdNumber: '',
        mobileNumber: '',
        overdueDays: '',
        lastActionCode: '',
        lastActionResultCode: '',
        lastActionBeginDate: '',
        lastActionEndDate: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '借款人',
          key: 'custName',
          align: 'center'
        },
        {
          title: '逾期天数',
          key: 'overdueDays',
          align: 'center'
        },
        {
          title: '应还款日期',
          key: 'repaymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.repaymentDate))
            ])
          }
        },
        {
          title: '贷款产品',
          key: 'productName',
          align: 'center'
        },
        {
          title: '最近一次行动结果',
          key: 'lastActionResult',
          align: 'center'
        },
        {
          title: '约会时间',
          key: 'appointmentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.appointmentDate))
            ])
          }
        },
        {
          title: '当前催收人员',
          key: 'currCollectMan',
          align: 'center'
        },
        {
          title: '最近一次行动时间',
          key: 'lastActionDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.lastActionDate))
            ])
          }
        },
        {
          title: '最近一次还款结果',
          key: 'lastpaymentResult',
          align: 'center'
        },
        {
          title: '风险分类',
          key: 'riskCategory',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  this.collectParams.loanId = params.row.loanId
                  this.collectParams.overdueCode = params.row.overdueCode
                  this.collectParams.custCardNo = params.row.custIdNumber
                  this.$router.push({ name: 'collection-deal-compent', query: this.collectParams })// 类似post传参
                }
              }
            }, '处理')
          }
        }
      ],
      orderData: [
      ],
      productList: [],
      channelList: [],
      fundList: [],
      lastActionCodeList: [],
      lastActionResultList: [],
      riskCategoryList: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.collectConditionInit()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.collectCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.collectCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/collectList', vm.collectCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.collectCondition.total = data.data.total
      }).catch(er => {

      })
    },
    reset () {
      var vm = this
      vm.collectCondition.riskCategoryCode = ''
      vm.collectCondition.productCode = ''
      vm.collectCondition.channelCode = ''
      vm.collectCondition.fundCode = ''
      vm.collectCondition.custName = ''
      vm.collectCondition.custIdNumber = ''
      vm.collectCondition.mobileNumber = ''
      vm.collectCondition.overdueDays = ''
      vm.collectCondition.lastActionCode = ''
      vm.collectCondition.lastActionResultCode = ''
      vm.collectCondition.lastActionBeginDate = ''
      vm.collectCondition.lastActionEndDate = ''
    },
    collectConditionInit () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/collectCondition').then(re => {
        var data = re.data
        vm.productList.push({ 'productType': '', 'productTypeName': '请选择' })
        for (var productLength = 0; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
        vm.channelList.push({ 'channelCode': '', 'channelName': '请选择' })
        for (var channelLength = 0; channelLength < data.data.channelList.length; channelLength++) {
          vm.channelList.push(data.data.channelList[channelLength])
        }

        vm.fundList.push({ 'fundCode': '', 'fundName': '请选择' })
        for (var fundLength = 0; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }

        vm.riskCategoryList.push({ 'riskCategoryCode': '', 'riskCategoryName': '请选择' })
        for (var riskCategoryLength = 0; riskCategoryLength < data.data.categoryList.length; riskCategoryLength++) {
          vm.riskCategoryList.push(data.data.categoryList[riskCategoryLength])
        }

        vm.lastActionResultList.push({ 'actionStatusCode': '', 'actionStatusDescp': '请选择' })
        for (var lastActionLength = 0; lastActionLength < data.data.actionReultList.length; lastActionLength++) {
          vm.lastActionResultList.push(data.data.actionReultList[lastActionLength])
        }

        vm.lastActionCodeList.push({ 'actionCodeName': '', 'actionCodeComment': '请选择' })
        for (var actionCodeLength = 0; actionCodeLength < data.data.actionCodeList.length; actionCodeLength++) {
          vm.lastActionCodeList.push(data.data.actionCodeList[actionCodeLength])
        }
      }).catch(er => {

      })
    },
    excelDown () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/collection/manage/service/downLoadExcel'
      document.getElementById('pageNum').value = this.collectCondition.pageNum
      document.getElementById('pageSize').value = this.collectCondition.pageSize
      document.getElementById('exportList').submit()
    },
    outOfLineDown () {
      document.getElementById('outOfLineDownForm').submit()
    }
  }

}
</script>
